<template>
  <div>
    <div class="setting-box" id="icon">
      <i class="d_icon el-icon-setting" />
    </div>
    <div v-show="isSeting" id="popbox" class="popBox">
      <div class="popTitle flex flex_between">
        <div>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="checkAllChange"
          /><span class="fw ml5">列表</span>
        </div>
        <div class="c_3F61F1 pointer" @click="resetStlye">重置</div>
      </div>
      <div class="tableHeadBox">
        <ul id="dragList" class="dragList">
          <li
            v-for="(item, index) in checkboxData"
            :key="index"
            class="flex flex_between taList"
          >
            <div class="flex">
              <i class="iconfont extend mr5" />
              <el-checkbox
                v-model="item.visible"
                :label="item"
                @change="saveHead(checkboxData)"
                >{{ item.columnName }}
              </el-checkbox>
            </div>
            <div @click="changeFixed(item.isFloat, index)">
              <i
                class="iconfont flexed pointer mr8"
                :class="item.isFloat ? 'c_3F61F1' : 'c_D2D5DA'"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  name: "TableHead",
  props: {
    listData: {
      type: Array,
    },
    tableCode: {
      type: String,
    },
  },
  data() {
    return {
      checkAll: true,
      isSeting: false,
    };
  },
  computed: {
    isIndeterminate() {
      const isSelected = !!this.listData.find(({ visible }) => visible);
      return !this.checkAll && isSelected;
    },
    checkboxData: {
      get() {
        return this.listData;
      },
      set(val) {
        
        this.$emit("update:listData", val);
      },
    },
  },
  watch: {
    checkboxData: {
      deep: true,
      handler(items) {
        // this.checkboxData = items.filter((item)=>{
        //   return item.isForceHide != 1
        // })
        // this.checkAll = items.every(({ visible }) => visible);
      },
    },
  },
  created() {
    this.checkAll = this.checkboxData.every(({ visible }) => visible);
    
        
  },
  deactivated() {
    document.removeEventListener("click", this.outClick);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.outClick);
  },
  mounted() {
    //  展开表头设置弹出层 点击div之外得地方 隐藏div
    document.addEventListener("click", this.outClick);
    this.setSort();
  },
  methods: {
    outClick(e) {
      const box = document.getElementById("popbox");
      const icon = document.getElementById("icon");
      if (box.contains(e.target)) {
        this.isSeting = true;
      } else if (icon.contains(e.target)) {
        this.isSeting = !this.isSeting;
      } else {
        this.isSeting = false;
      }
    },
    checkAllChange(visible) {
      this.checkboxData = this.checkboxData.map((item) =>
        Object.assign(item, {
          visible,
        })
      );
    },
    saveHead(newArray) {
      const parmas = newArray;
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas);
      }, 300);
    },
    resetStlye() {
      const parmas = {
        tableCode: this.tableCode,
      };
      this.$api.common.resetTableStyle(parmas).then(() => {
        this.$message({
          message: "已重置",
          type: "success",
        });
        this.$emit("reset");
      });
    },
    setSort() {
      const el = document.getElementById("dragList");
      Sortable.create(el, {
        ghostClass: "sortable-ghost", // 放置占位符的类名
        onUpdate: (evt) => {
          this.checkboxData = [];
          const targetRow = this.checkboxData.splice(evt.oldIndex, 1)[0];
          this.checkboxData.splice(evt.newIndex, 0, targetRow);
          const newArray = this.checkboxData.slice(0);
          newArray.forEach((m, x) => {
            m.columnSort = x;
          });
          // 拖动结束时触发，调用接口，改变后台的排序
          this.$nextTick(() => {
            this.checkboxData = newArray;
            this.saveHead(newArray); // 保存修改后的表头
          });
        },
      });
    },
    changeFixed(isFloat, index) {
      this.checkboxData[index].isFloat = !isFloat;
      this.saveHead(this.checkboxData);
    },
  },
};
</script>
<style lang="scss" scoped>
.setting-box {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 19px;
}

.setting-box:hover {
  background-color: #3f61f1;
  color: #fff;
}
</style>
